<template>
	<view class="attentionlist">
		<u-navbar title="关注列表" :autoBack="true" :placeholder="true"> </u-navbar>
		<view v-for="(item, index) in attentionList" :key="index" class="attention-item">
			<view class="item-left">
				<!-- 头像部分 -->
				<image v-if="item.headPicture" class="left-img" :src="item.headPicture" mode="aspectFill"
					@click="toTeacherInfo(item.id)" />
				<image v-else class="left-img" src="https://lesson.iapeap.com/images/uniapp_listener/logo.png"
					mode="aspectFill" @click="toTeacherInfo(item.id)" />

				<!-- 信息部分 -->
				<view class="xinxi">
					<view class="name-rate">
						<text class="left-name">{{item.name}}</text>
						<text class="left-haoping">{{item.rate}}</text>
					</view>
					<view class="left-content">
						{{item.talkYou || "我想对你说"}}
					</view>
					<!-- 标签区域 -->
					<view class="biaoqian">
						<view v-for="(tag, tagIndex) in item.expertiseField" :key="tagIndex" class="biaoqian-item">
							<text>{{tag}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 已关注按钮 -->
			<view class="button1">
				已关注
			</view>
		</view>
	</view>
</template>

<script>
	import {
		attentionList
	} from '@/utils/getDate.js';
	export default {
		data() {
			return {
				attentionList: [] // 关注列表数据
			}
		},
		onShow() {
			this.getAttentionList()
		},
		methods: {
			// 获取关注列表
			getAttentionList() {
				var data = {
					userId: 2037557,
					pageNum: 1,
					pageSize: 10,
					token: "5d7aa5fc0b3a48e2a912a94a4671ddf4"
				};
				attentionList(data).then(res => {
					this.attentionList = res.data.list
				})

			},

			// 跳转教师详情
			toTeacherInfo(id) {
				uni.navigateTo({
					url: `/pages/teacherInfo/index?id=${id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.attentionlist {
		background-color: #fafafa;
		min-height: 100vh;
		padding: 48rpx;
		box-sizing: border-box;

		.attention-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 654rpx;
			background: #ffffff;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 20px 38rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.item-left {
				display: flex;
				gap: 24rpx;
				flex: 1;

				.left-img {
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
					border: 2rpx solid #f0f0f0;
				}

				.xinxi {
					flex: 1;
					min-width: 0;

					.name-rate {
						display: flex;
						align-items: center;
						gap: 16rpx;
						margin-bottom: 8rpx;

						.left-name {
							font-size: 28rpx;
							font-weight: 500;
							color: #000025;
							max-width: 200rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.left-haoping {
							font-size: 20rpx;
							color: #666;
							padding: 4rpx 8rpx;
							background: #f5f5f5;
							border-radius: 20rpx;
						}
					}

					.left-content {
						font-size: 22rpx;
						color: #666;
						margin-bottom: 8rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}

					.biaoqian {
						display: flex;
						flex-wrap: wrap;
						gap: 12rpx;

						.biaoqian-item {
							height: 40rpx;
							background: #f5f7fa;
							border-radius: 20rpx;
							border: 2rpx solid rgba(103, 143, 205, 0.2);
							font-size: 20rpx;
							color: #409eff;
							padding: 0 16rpx;
							display: flex;
							align-items: center;
						}
					}
				}
			}

			.button1 {
				width: 94rpx;
				height: 44rpx;
				background: #faaeae;
				box-shadow: 0 4rpx 10rpx rgba(250, 174, 174, 0.3);
				border-radius: 22rpx;
				font-size: 20rpx;
				color: #ffffff;
				line-height: 44rpx;
				text-align: center;
				flex-shrink: 0;
			}
		}
	}
</style>